<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@include file="../header.jsp" %>

<head>
	<style>
		.pc-popup{
			width:410px;margin-left:100px;
		}
		
		.model-title{
			line-height:30px;
			height:30px;
			margin-top:0px;
			padding-left:10px;
			background: #eee;
			color:#333;
		}
		
		.total{
			margin-top: 10px;
			padding: 5px;
			background: #F7F7F7;
			color:#666;
		}
		
		.goodsbox:hover{
			border:1px #ff5500 solid;
		}
	</style>
</head>

<body>
	<tags:topPC/>
    <div class="container" style="margin-top:40px;">
    	<div class="row">
    	
    	
			<ul class="list-group">
			  <li class="list-group-item" style="background: #F7F7F7;">
			  	<div class="row">
			  		<div class="col-xs-3 col-md-4" align="center">商品信息</div>
			  		<div class="col-xs-3 col-md-2" align="center">单价</div>
			  		<div class="col-xs-3 col-md-2" align="center">数量</div>
			  		<div class="col-xs-3 col-md-4" align="center">操作</div>
			  	</div>
			  
			  </li>
			  <div class="shopboxs">
				  <li class="list-group-item cartbox" id="cart_model_div" style="display: none;margin-top:1px;">
				  	
				  	<div class="row">
				  		<div class="col-xs-3 col-md-4">
				  			<div style="float:left;">
				  				<img class="shoppic" alt="" src="${ctx }/upload/download.do?fileName=1392079391609_.jpg" style="width:60px;height:60px;">
				  			</div>
		  					 <div style="float:left;margin-left:5px;width:249px;">
		  					 	<h5><a href="#" style="font-size:12px;color:#000;" class="title"></a></h5>
				  				<h5 style="font-size:12px;color:#666;" id="color_size_id"></h5>
		  					 </div>
		  					 
				  		</div>
				  		
				  		<div class="col-xs-3 col-md-2" align="center">
				  			<span class="price" style="color:#333;line-height: 60px;"></span>
				  		</div>
				  		
				  		<div class="col-xs-3 col-md-2" align="center" style="line-height: 60px;">
				  			<a href="#" style="text-decoration:none;color:#000;padding:5px 10px 5px 10px;border:1px solid #b5b5b5;background: #efefef;" class="reduce">-</a>
			  				<input type="text" style="line-height:26px;width:30px;padding-left:8px;" maxlength="3" class="num"/>
                   			<a href="#" class="add" style="text-decoration:none;color:#000;padding:5px 10px 5px 10px;border:1px solid #b5b5b5;background: #efefef;">+</a>
				  		</div>
				  		<div class="col-xs-3 col-md-4" align="center"><a href="#" class="del" style="line-height: 60px;font-size:12px;color:#000;">删除</a></div>
				  	</div>
			  	 </li>
		  	 </div>
			  
			  
			   <li class="list-group-item" style="background: #F7F7F7;"> 
			   	  <div class="total fr" align="right">总计（包邮免运费）：<span id="finalPrice" style="color: #F76120;font-size: 20px;font-weight: 400;" data-bind="0.00">¥0.00</span></div> 
			   </li>
			 
			</ul>
		</div>
		<div class="row">  
   			<a type="button" id="go_buy_btn" class="btn btn-buy btn-lg"  href="${ctx }/psettlementLogined" style="float:right;background: #c00;width: 200px;height: 40px;font-size: 16px;color: #fff;font-family: \5FAE\8F6F\96C5\9ED1;margin-right: 14px;border-radius:0;">去结算></a>
			<a type="button" id="go_go_btn" class="btn btn-def btn-lg"  style="float:right;background: #ebebeb;width: 180px;height: 40px;font-size: 16px;color: #000;font-family: \5FAE\8F6F\96C5\9ED1;margin-right: 14px;border-radius:0;" href="${ctx }/">继续购物</a>
	    	
		</div>
		
		<div class="row" style="border:1px solid #ccc;margin-top:60px;">
					<div>
						<h5 class="model-title">很多人还购买了以下商品</h5>
					</div>
					<div id="shop_recommend_id">
						<!-- col1 -->
					    <div class="col-sm-2 col-md-2" id="col_id0">
							    	
				  		</div>
				  		
				  		<!-- col2 -->
				  		<div class="col-sm-2 col-md-2" id="col_id1">
							    	
				  		</div>
				  		
				  		<!-- col3 -->
				  		<div class="col-sm-2 col-md-2" id="col_id2">
							    	
				  		</div>
				  		
				  		<!-- col4 -->
				  		<div class="col-sm-2 col-md-2" id="col_id3">
							    	
				  		</div>
				  		
				  		<!-- col5 -->
				  		<div class="col-sm-2 col-md-2" id="col_id4">
							    	
				  		</div>
				  		
				  		<!-- col6 -->
				  		<div class="col-sm-2 col-md-2" id="col_id5">
							    	
				  		</div>
				  	
					</div>
		</div>
		
		
		
		<!-- begin model -->
			<div class="thumbnail goodsbox" style="display: none;" id="goods_recommend_model">
			      <a href="#" target="_blank" class="title-a" style="text-decoration: none;"><h6 class="title ellipsis" style="color:#666;"></h6></a>
			      <a href="#" target="_blank" class="img-a"><img alt="" src="${ctx }/images/loading.gif"></a>
			      <div class="caption">
			        
			        <p>
			        	<strong class="nowprice" style="color:#F76120;font-size:16px;"></strong>
			        	<span class="oldprice" style="color:#9F9F9F;font-size:14px;text-decoration:line-through;"></span>
			        </p>
			      </div>
			</div>
		<!-- end model -->
		
  	</div>
  	
 

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content" style="margin-top:100px;">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">您尚未登录
		   <div style="margin-top:5px;font-size:20px;">
	   			我不想注册<a style="color:#ff5500;font-weight: bold;text-decoration: underline;" href="${ctx}/psettlement">直接购买</a>
		   </div>
        </h4>
      </div>
      <div class="modal-body"  style="padding-bottom:60px;">
        <div class="bs-example bs-example-tabs">
				      <ul id="myTab" class="nav nav-tabs">
				        <li class="active"><a href="#profile" data-toggle="tab">登录</a></li>
				        <li class=""><a href="#dropdown1" data-toggle="tab">注册</a></li>
				      </ul>
				      <div id="myTabContent" class="tab-content">
				        <div class="tab-pane fade active in" id="profile">
				          	<form role="form" id="login_form" style="padding-top:5px;">
							  <div class="form-group">
							    <label for="exampleInputEmail1">邮箱地址：</label>
							    <input type="text" name="email" class="form-control required useTitle validate-email" required-title="请输入用户名" id="email_login" placeholder="请输入邮箱">
							  </div>
							  <div class="form-group">
							    <label for="exampleInputPassword1">密码：</label>
							    <input type="password" name="password" class="form-control required useTitle min-length-6 max-length-16 ajax" maxlength="16" required-title="密码不能为空" min-length-title="密码由6到16位的字符组成" max-length-title="密码由6到16位的字符组成" id="password"/>
							  </div>
							   
							  <button type="submit" id="login_btn" class="btn btn-buy  btn-block" style="height:38px;">登录</button>
							  
<!-- 							   <div style="margin-top:5px;font-size:12px;"> -->
<%-- 							   		我不想登录<a style="color:#ff5500;" href="${ctx}/psettlement">直接购买</a> --%>
<!-- 							   </div> -->
							</form>
				        </div>
				        <div class="tab-pane fade" id="dropdown1">
				          <form role="form" id="register_form" style="padding-top:20px;">
							  <div class="form-group">
							    <label for="exampleInputEmail1">电子邮箱：</label> 
							    <input type="text" name="email" class="form-control required useTitle validate-email ajax" required-title="请输入有效的电子邮箱" id="email_reg" placeholder="请输入电子邮箱作为账户名">
							  </div>
							  <div class="form-group">
							    <label for="exampleInputPassword1">密码：</label>
							    <input type="password" name="password" class="form-control required useTitle min-length-6 max-length-16" maxlength="16" required-title="密码不能为空" min-length-title="密码由6到16位的字符组成" max-length-title="密码由6到16位的字符组成" id="reg_password"/>
							  </div>
							  
							  <div class="form-group">
							    <label for="exampleInputPassword1">确认密码：</label>
							    <input type="password" name="confirmpassword" class="form-control required equals-reg_password useTitle min-length-6 max-length-16" maxlength="16" required-title="密码不能为空" min-length-title="密码由6到16位的字符组成" max-length-title="密码由6到16位的字符组成" id="confirmpassword"/>
							  </div>
							  
							   <div class="checkbox">
								    <label style="font-size:12px;">
								      <input type="checkbox" id="agree_ment_id"> 我已阅读并同意《<a style="color:#ff5500;" href="${ctx }/agreement" target="_blank">名鞋团购网用户注册协议</a>》
								    </label>
							   </div>
							  <button type="submit" id="register_btn" disabled="disabled" class="disabled btn btn-buy  btn-block" style="height:38px;">立即注册</button>
							  
<!-- 							   <div style="margin-top:5px;font-size:12px;"> -->
<%-- 							   		我不想注册<a style="color:#ff5500;" href="${ctx}/psettlement">直接购买</a> --%>
<!-- 							   </div> -->
							</form>
				        </div>
				      </div>
			    </div>
 
      </div>
      
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
	
	<tags:bottomPC/>
	<script>
		$(function(){
			
			var valid = new jValidation.Validation('login_form', {
				immediate : true,
				onElementValidateForAjax : function(elm) {
					if ($(elm).attr("id") == 'password') {
						var password = $("#password").val();
						var username = $("#email_login").val();
						return validateUser(username,password);
					}
				}
				
			});
			
			var validReg = new jValidation.Validation('register_form', {
				immediate : true,
				onElementValidateForAjax : function(elm) {
					if ($(elm).attr("id") == 'email_reg') {
						var username = $(elm).val();
						return validateUsername(username);
					}
				}
			});
			
			function validateUser(username,password) {
				var result = new jValidation.ajax.Result();
				jQuery.ajax({
					type : 'Get',
					contentType : 'application/json',
					url : '${ctx}/customer/validate.do',
					dataType : 'json',
					async : false,
					data : {
						username : username,
						password:password
					},
					success : function(data) {
						if (!data.result) {
							result.setResult(false);
							result.setErrorMsg(data.errorMsg);
						} else {
							result.setResult(true);
						}
					},
					error : function(data) {
						result.setResult(false);
						result.setErrorMsg("服务器繁忙，请您稍后再试！");
					}
				});
				return result;

			}
			
			function validateUsername(username) {
				var result = new jValidation.ajax.Result();
				jQuery.ajax({
					type : 'Get',
					contentType : 'application/json',
					url : '${ctx}/customer/validateUsername.do',
					dataType : 'json',
					async : false,
					data : {
						username : username
					},
					success : function(data) {
						if (!data.result) {
							result.setResult(false);
							result.setErrorMsg(data.errorMsg);
						} else {
							result.setResult(true);
						}
					},
					error : function(data) {
						result.setResult(false);
						result.setErrorMsg("服务器繁忙，请您稍后再试！");
					}
				});
				return result;

			}
			
			$('#myTab a').click(function (e) {
				  e.preventDefault();
				  $(this).tab('show');
			});
			
			$("#login_btn").click(function(){
				if(!valid.validate()){
					return false;
				}
				window.location.href = "${ctx}/psettlementLogined";
				return false;
			});
			
			$("#register_btn").click(function(){
				if(!validReg.validate()){
					return false;
				}
				
				var postData = $("#register_form").serialize();

				$.ajax({
					type : "POST",
					url : "${ctx}/customer/add.do",
					data : postData,
					dataType : "json",
					success : function(data) {
						if (data.result) {
							window.location.href = "${ctx}/psettlementLogined";
						} else {
							alert("系统繁忙，请您稍后再试！");
							return false;
						}
					},
					error : function(data) {
						alert("系统繁忙，请您稍后再试！");
						return false;
					}
				});
				return false;
			});
			
			//计算总价
			var calTotalPrice = function (){
				var totalPrice = 0;
				var payNum = 0;
				$(".shopboxs .price").each(function(){
					var price = $(this).data("price");
					var num = $(this).closest(".row").find(".num").val();
					if(price){
						totalPrice = totalPrice + parseFloat(price)*num;
					}
					payNum++;
				});
				$("#finalPrice").html("￥"+totalPrice);
				//$(".payinfo .fz12").html(payNum);
			};
			
			//为删除按钮绑定事件
			$(".shopboxs").on("click",".del",function(){
				var id = $(this).data("id");
				var color = $(this).data("color");
				var size = $(this).data("size");
				var that = $(this);
				jQuery.ajax({
					type : 'get',
					contentType : 'application/json',
					url : '${ctx}/cart/delCart.do',
					async:false,
					data : {
						goodsId : id,
						color:color,
						size:size
					},
					dataType : 'json',
					success : function(data) {
						that.closest(".cartbox").fadeOut(function(){
							$(this).remove();
							calTotalPrice();
							var num = $(".topcart").html();
							if(num){
								$(".topcart").html(parseInt(num)-1);
							}
							if($(".cartbox").size() <=1){
								$("#go_buy_btn").html("购物车为空，去首页看看").attr("href","${ctx}/");		
								$(".cart_nums").hide().html("");
							}
						});
						
						
						
					}
				});
				
			});
			
			//获取购物车数据
			jQuery.ajax({
				type : 'Get',
				contentType : 'application/json',
				url : '${ctx}/cart/getCartList.do',
				async:false,
				dataType : 'json',
				success : function(data) {
					var cartList = data.obj;
					if(cartList){
						if(cartList.length >0){
							var modelDiv = $("#cart_model_div");
							for(var i=0 ;i<cartList.length;i++){
								var goods = cartList[i].goods;
								var num = cartList[i].num;
								var color = cartList[i].color;
								var size = cartList[i].size;
								var pic = cartList[i].pic;
								var model = modelDiv.clone();
								$(".shopboxs").append(model);
							    model.find(".title").attr("href","./pdetailGoods/"+goods.id);
							    model.find("#color_size_id").html("颜色："+color+"，尺码："+size);
								model.find(".title").html(goods.title);
								if(pic.indexOf("http") != -1){
									model.find(".shoppic").attr("src",pic);
								}else{
									model.find(".shoppic").attr("src","./upload/download.do?fileName="+ pic);
								}
								var price = goods.price;
								model.find(".num").val(num).data("key",goods.id+"_"+color+"_"+size);
								model.find(".price").html("¥"+goods.nowPrice).data("price",goods.nowPrice);
								model.find(".del").data("id",goods.id).data("color",color).data("size",size);
								model.show();
							}
							
							calTotalPrice();	
						}else{
							$("#go_buy_btn").html("购物车为空，去首页看看").attr("href","${ctx}/");
						}
						
					}else{
						alert("购物车为空！");
					}
					
				}
			});
			
			//去结算按钮
			$("#go_buy_btn").click(function(){
				if($(this).html()=="购物车为空，去首页看看"){
					return true;
				}
				if("${customer.email}"){
					return true;
				}else{
					window.location.href = "${ctx}/psettlement";
					//$('#myModal').modal(); 
					return false;
				}
				return false;
				
			});
			
			
			//同意协议复选框绑定事件
			$("#agree_ment_id").click(function(){
				
				if($(this).prop("checked")){
					$("#register_btn").removeClass("disabled").prop("disabled",false);
				}else{
					$("#register_btn").addClass("disabled").prop("disabled",true);
				}
			});
			
			//如果是PC端，设置popup宽度
			if(jWei.util.isPC()){
				$(".modal-content").addClass("pc-popup");
			}
			
			$(".num").keyup(function(event){
				var keycode = event.which;
				if(keycode !=8){
					var reg = /[^0-9\.]+/gi,
					val = $(this).val().replace(reg,"");
					if(val == 0 || val == ""){
						val = 1;
					}
					$(this).val(val);
				}
				
			});
			
			$(".num").blur(function(){
				var key = $(this).data("key");
				var num = $(this).val();
				//获取购物车数据
				jQuery.ajax({
					type : 'Get',
					contentType : 'application/json',
					url : '${ctx}/cart/modifyNum.do',
					data:{
						key:key,
						num:num
					},
					async:false,
					dataType : 'json',
					success : function(data) {
							
					}
				});
				calTotalPrice();
			});
			
			$(".shopboxs").on("click",".reduce",function(){
				var numElm = $(this).parent().find(".num");
				var val = numElm.val();
				if(val>1){
					val = parseInt(val)-1;
					numElm.val(val);
				}
				numElm.trigger("blur");
				return false;
			});
			
			$(".shopboxs").on("click",".add",function(){
				var numElm = $(this).parent().find(".num");
				var val = numElm.val();
				val = parseInt(val)+1;
				numElm.val(val);
				numElm.trigger("blur");
				return false;
			});
			
			//设置购买了该商品的用户还购买了
			  (function(){
				  var currP =Math.floor(Math.random()*5)+1;
			        $.get("${ctx}/goods/goodsListByGrade.do?pageSize=24&grade=1&currPage="+currP, function(data){
			        	var dataObj = $.parseJSON(data);
			        	
			        	var list = dataObj.obj.goodsList;
			        	for(var i = 0 ;i<list.length;i++){
			        		var model = $("#goods_recommend_model").clone();
			        		var goods = list[i];
			        		var price = goods.price;
							$("#shop_recommend_id #col_id"+i%6).append(model);
							var picURL = "";
							if(goods.picName.indexOf("http") != -1){
								picURL = goods.picName;
							}else{
								picURL = "${ctx}/upload/downloadCompress.do?fileName="+goods.picName;
							}
							if(i<6){
								model.find("img").attr("src",picURL).attr("title",goods.title).attr("alt",goods.title);
							}else{
								model.find("img").attr("data-url",picURL).attr("title",goods.title).attr("alt",goods.title);	
							}
			            	
			            	model.find(".title").html(goods.title);
			            	model.find(".img-a,.btn-buy,.title-a").attr("href","${ctx}/pdetailGoods/"+goods.id);
			            	model.find(".nowprice").html("￥"+goods.nowPrice);
			            	model.find(".oldprice").html("￥"+price);
			            	model.show();
			        	}
			        	$("#shop_recommend_id img").scrollLoading();

			        });	
					
				})();
			
			 
			
		});
	</script>
	
</body>